<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志</title>
    <link rel="stylesheet" href="js/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-row v-loading="loading">
            <el-col :span="24">
                <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="username"
                            label="用户">
                    </el-table-column>
                    <el-table-column
                            prop="ip"
                            label="登录IP">
                    </el-table-column>
                    <el-table-column
                            prop="login_result"
                            label="登录结果">
                    </el-table-column>
                    <el-table-column
                            prop="reason"
                            label="失败原因">
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableSize">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</body>
<script src="js/base.js"></script>
<script src="js/vue/vue.js"></script>
<script src="js/element-ui/index.js"></script>
<script src="js/jquery/jquery-3.3.1.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            loading: false,
            table: {
                page: 0,
                limit:10
            },
            tableData: [],
            tableSize: 0
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.table.limit = val;
                this.getUserLoginLog();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.table.page = val - 1;
                this.getUserLoginLog();
            },
            getUserLoginLog(){
                var _this = this;
                _this.loading = true;
                $.ajax({
                    url: 'user/getLoginLog',
                    data: _this.table,
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                        if(res.code === 0){
                            _this.tableData = res.data;
                            _this.tableSize = res.size;
                        }else{
                            _this.$message({message: res.msg, type: 'warning'});
                        }
                        _this.loading = false;
                    },
                    error: function (res) {
                        console.log(res);
                    }
                });
            }
        },
        mounted: function () {
            this.getUserLoginLog();
        }
    });
</script>
</html>